<template>
	<div class="s_journal">
		<ul class="clear scope-fans-ul" v-loading="loading">
			<template   v-for="(item ,index) of fansList">

				<li class="scope-fans" :key="item.id">
					
					<div class="scope-fans-wp">
						<div class="scope-fans-img "><img :src="BASE_URL+item.avatar_path" /></div>
						<h3>{{item.name}}</h3>
						<div class="scope-fans-txt">
							<p>{{item.rename}}</p>
						</div>
						<div class="scope-fans-op">
							<el-button  type="primary" plain  @click="space(item.id)">查看详情</el-button>
							<el-button  type="primary" plain v-if="item.is_relation === 0" @click="getFollow(item.id ,'add')"><i class="el-icon-plus"></i>关注</el-button>
							<el-button class="avtice"  type="primary" plain v-else @click="getFollow(item.id, 'del')">已关注</el-button>
						</div>
					</div>

					<div class="scope-fans-txt scope-fans-hover">
						<p>{{item.rename}}</p>
						<div v-html="item.autograph"></div>
					</div>
				</li>

				<li class="i_teacherLs fl" :key="index" v-if="0">
					<div class="i_teacherLs_b">
				
						<a>
							<img :src="BASE_URL+item.avatar_path">
						</a>
						<h3>{{item.name}}</h3>
						<div class="sub_name" v-show="item.sub_name != '暂未绑定科目' ">{{item.sub_name}}</div>
					</div>
					<div class="i_teacherLs_t i_transition">
						<h3>{{item.name}}</h3>
						<div class="sub_name" v-show="item.sub_name != '暂未绑定科目' ">{{item.sub_name}}</div>
						<div class="i_brief">{{item.autograph}}</div>

						<div class="i_teacherLs_m">
							<i class="ipng but_maino1_slide" @click="space(item.id)"></i>

							<template >
								<i class="ipng but_Collection02_slide"  v-if="item.is_relation === 0" @click="getCancel(item.id, 'add')"></i>
								<i class="ipng but_Collection02_down" v-else @click="getCancel(item.id, 'del')"></i>
							</template>
						</div>
					</div>
				</li>
			</template>
			
		</ul>
		<el-pagination v-if="parseInt(total_number) > 12"
	      @current-change="changePage"
	      :current-page="listFansParam.page"
	      :page-size="listFansParam.size"
	      layout="prev, pager, next"
	      :total="total_number">
	    </el-pagination>

	    <div class="dependent" v-if="placeholder">
	    	<i class="ipm image_nofound"></i>
	    	<p>
	    		还没发现任何相关的内容哦~
	    	</p>
	    </div>

	</div>
</template>

<script>

	export default{
		name: 'follow',
		data() {
			return {
				listFansParam:{
					type:1,
					user_id: this.$g.user_id,
					size:12,
					page:1,
					data_type:2,
				},
				total_number:0,
				fansList:[],
				placeholder: false,
				loading: true,
			}
		},
		created(){
	       this.getFansList();
		},
		methods: {

			space(id){
				let host = sessionStorage.getItem( 'host' )
				let redirectParams = sessionStorage.getItem( 'redirect_params' )
				let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=home/liveList`
				window.open(link)
			},
			//分页改变
            changePage(val) {
            	this.listFansParam.page = val;
    			this.getFansList();
            },

            getFansList(){
            	let success = ( data=>{
            		this.fansList = data.data.data;
            		this.total_number = data.data.data_sum;


            		this.loading = false
            		this.fansList.length === 0
            		? this.placeholder = true
            		: this.placeholder = false
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/user/relation',{params: this.listFansParam,func:{success:success}})
            },
            getCancel(id, type){
            	let success = ( res =>{
            		this.$message.success(res.msg);
            		this.$emit('setFollow','follow')
            		this.getFansList()
            	});

            	let state = ''
            	if (type == 'add') {
            		state = 'add'
            	}else{
            		state = 'del'
            	}

            	this.$ajax({
            		url: 'api/user/bind_relation',
            		method: 'post',
            		data: {
            			user_id: this.listFansParam.user_id,
            			follow_id: id,
            			add_delete: state,
            			type: 0
            		},
            		func: {
            			success: success
            		}
            	})
            }
		}
	}
</script>